<template>
  <div class="string-operations">
    <el-card class="operation-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span><el-icon><Edit /></el-icon> 设置字符串</span>
        </div>
      </template>
      <el-form :model="setForm" label-width="120px" label-position="left" :rules="setRules" ref="setFormRef">
        <el-form-item label="键名" prop="key">
          <el-input v-model="setForm.key" placeholder="请输入键名" clearable />
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input
            v-model="setForm.value"
            type="textarea"
            :rows="3"
            placeholder="请输入值"
            clearable
            show-word-limit
            maxlength="1000"
          />
        </el-form-item>
        <el-form-item label="过期时间">
          <div class="expire-input">
            <el-input-number
              v-model="setForm.expire"
              :min="0"
              :precision="0"
              :step="60"
              placeholder="0"
            />
            <el-select v-model="setForm.expireUnit" style="width: 80px; margin-left: 10px;">
              <el-option label="秒" value="seconds" />
              <el-option label="分" value="minutes" />
              <el-option label="时" value="hours" />
              <el-option label="天" value="days" />
            </el-select>
          </div>
          <el-tag v-if="setForm.expire === 0" size="small" type="info" class="expire-tag">永不过期</el-tag>
          <el-tag v-else size="small" type="warning" class="expire-tag">
            {{ formatExpireTime(setForm.expire, setForm.expireUnit) }}
          </el-tag>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSet" :loading="setLoading" :icon="Check">设置</el-button>
          <el-button @click="resetSetForm" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="operation-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span><el-icon><Search /></el-icon> 获取字符串</span>
          <div class="header-actions" v-if="getResult.show">
            <el-tag :type="getResult.type === 'get' && getResult.value !== null ? 'success' : 'warning'" size="small">
              {{ getResultStatusText }}
            </el-tag>
          </div>
        </div>
      </template>

      <el-form :model="getForm" label-width="120px" label-position="left" :rules="getRules" ref="getFormRef">
        <el-form-item label="键名" prop="key">
          <el-input
            v-model="getForm.key"
            placeholder="请输入键名"
            clearable
            @keyup.enter="handleGet"
            @input="clearResult"
          >
            <template #append>
              <el-button @click="handleGet" :loading="getLoading" type="primary">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="button-group">
            <el-button type="primary" @click="handleGet" :loading="getLoading" :icon="Search">
              获取值
            </el-button>
            <el-button @click="handleCheckExists" :loading="existsLoading" :icon="View" plain>
              检查存在
            </el-button>
            <el-button @click="handleGetTTL" :loading="ttlLoading" :icon="Timer" plain>
              查看TTL
            </el-button>
            <el-button @click="resetGetForm" :icon="Refresh" plain>
              重置
            </el-button>
          </div>
        </el-form-item>
      </el-form>

      <!-- 结果显示区域 -->
      <div v-if="getResult.show" class="result-section">
        <div class="result-header">
          <h4><el-icon><Document /></el-icon> 查询结果</h4>
          <div class="result-actions">
            <el-button type="text" @click="copyResult" :icon="CopyDocument" size="small">
              复制
            </el-button>
            <el-button type="text" @click="clearResult" :icon="Close" size="small">
              清空
            </el-button>
          </div>
        </div>

        <!-- 键不存在 -->
        <div v-if="getResult.value === null && getResult.type === 'get'" class="empty-result">
          <el-empty description="未找到该键" :image-size="80">
            <template #description>
              <p>键 <code>{{ getResult.key }}</code> 不存在</p>
            </template>
            <el-button type="primary" @click="() => setForm.key = getResult.key">
              创建该键
            </el-button>
          </el-empty>
        </div>

        <!-- 键存在性检查结果 -->
        <div v-if="getResult.type === 'exists'" class="exists-result">
          <div class="result-card" :class="getResult.exists ? 'success-card' : 'warning-card'">
            <div class="result-icon">
              <el-icon v-if="getResult.exists"><SuccessFilled /></el-icon>
              <el-icon v-else><WarningFilled /></el-icon>
            </div>
            <div class="result-content">
              <h5>{{ getResult.exists ? '键存在' : '键不存在' }}</h5>
              <p>键名: <code>{{ getResult.key }}</code></p>
              <p>状态: <strong>{{ getResult.exists ? '存在' : '不存在' }}</strong></p>
            </div>
          </div>
        </div>

        <!-- TTL结果 -->
        <div v-if="getResult.type === 'ttl'" class="ttl-result">
          <div class="result-card" :class="getTTLCardClass(getResult.ttl)">
            <div class="result-icon">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="result-content">
              <h5>TTL查询结果</h5>
              <p>键名: <code>{{ getResult.key }}</code></p>
              <p>TTL值: <strong>{{ getResult.ttl }}</strong></p>
              <p>状态: <strong>{{ getResult.status || formatTTL(getResult.ttl) }}</strong></p>
            </div>
          </div>
        </div>

        <!-- 字符串值显示 -->
        <div v-if="getResult.value !== null && getResult.type === 'get'" class="value-result">
          <!-- 键信息概览 -->
          <div class="key-info-card">
            <el-descriptions :column="3" border size="small">
              <el-descriptions-item label="键名">
                <code class="key-name">{{ getResult.key }}</code>
              </el-descriptions-item>
              <el-descriptions-item label="数据类型">
                <el-tag type="success" size="small">STRING</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="字符长度">
                <span class="length-info">{{ getResult.value.length }} 字符</span>
              </el-descriptions-item>
              <el-descriptions-item label="字节大小">
                <span class="size-info">{{ getValueSize(getResult.value) }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="TTL">
                <el-tag :type="getTTLTagType(getResult.ttl)" size="small">
                  {{ formatTTL(getResult.ttl) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="编码">
                <span class="encoding-info">{{ getValueEncoding(getResult.value) }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 值内容显示 -->
          <div class="value-display-card">
            <div class="value-header">
              <h5><el-icon><Document /></el-icon> 值内容</h5>
              <div class="value-tools">
                <el-button-group size="small">
                  <el-button :type="viewMode === 'text' ? 'primary' : ''" @click="viewMode = 'text'">
                    文本
                  </el-button>
                  <el-button :type="viewMode === 'json' ? 'primary' : ''" @click="viewMode = 'json'" :disabled="!isValidJSON(getResult.value)">
                    JSON
                  </el-button>
                  <el-button :type="viewMode === 'hex' ? 'primary' : ''" @click="viewMode = 'hex'">
                    十六进制
                  </el-button>
                </el-button-group>
                <el-button size="small" @click="downloadValue" :icon="Download" plain>
                  下载
                </el-button>
              </div>
            </div>

            <div class="value-content-wrapper">
              <!-- 文本模式 -->
              <div v-if="viewMode === 'text'" class="text-view">
                <pre class="value-text">{{ getResult.value }}</pre>
              </div>

              <!-- JSON模式 -->
              <div v-if="viewMode === 'json'" class="json-view">
                <pre class="value-json">{{ formatJSON(getResult.value) }}</pre>
              </div>

              <!-- 十六进制模式 -->
              <div v-if="viewMode === 'hex'" class="hex-view">
                <pre class="value-hex">{{ formatHex(getResult.value) }}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="operation-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span><el-icon><Delete /></el-icon> 删除键</span>
        </div>
      </template>
      <el-form :model="deleteForm" label-width="120px" label-position="left" :rules="deleteRules" ref="deleteFormRef">
        <el-form-item label="键名" prop="key">
          <el-input v-model="deleteForm.key" placeholder="请输入键名" clearable @keyup.enter="handleDelete" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="handleDelete" :loading="deleteLoading" :icon="Delete">删除</el-button>
          <el-button @click="resetDeleteForm" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="operation-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span><el-icon><Timer /></el-icon> 设置过期时间</span>
        </div>
      </template>
      <el-form :model="expireForm" label-width="120px" label-position="left" :rules="expireRules" ref="expireFormRef">
        <el-form-item label="键名" prop="key">
          <el-input v-model="expireForm.key" placeholder="请输入键名" clearable />
        </el-form-item>
        <el-form-item label="过期时间" prop="seconds">
          <div class="expire-input">
            <el-input-number
              v-model="expireForm.seconds"
              :min="1"
              :precision="0"
              :step="60"
              placeholder="60"
            />
            <el-select v-model="expireForm.unit" style="width: 80px; margin-left: 10px;">
              <el-option label="秒" value="seconds" />
              <el-option label="分" value="minutes" />
              <el-option label="时" value="hours" />
              <el-option label="天" value="days" />
            </el-select>
          </div>
          <el-tag size="small" type="info" class="expire-tag">
            {{ formatExpireTime(expireForm.seconds, expireForm.unit) }}
          </el-tag>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="handleSetExpire" :loading="expireLoading" :icon="Timer">设置过期</el-button>
          <el-button @click="resetExpireForm" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Search, Refresh, Delete, CopyDocument, Close, Timer, View, Edit, SuccessFilled, WarningFilled, Document, Download } from '@element-plus/icons-vue'
import { setString, getString, del, exists, ttl, expire } from '../api/redis'

const setFormRef = ref()
const getFormRef = ref()
const deleteFormRef = ref()
const expireFormRef = ref()

const setLoading = ref(false)
const getLoading = ref(false)
const deleteLoading = ref(false)
const expireLoading = ref(false)
const existsLoading = ref(false)
const ttlLoading = ref(false)

const setForm = reactive({
  key: '',
  value: '',
  expire: 0,
  expireUnit: 'seconds'
})

const getForm = reactive({
  key: ''
})

const deleteForm = reactive({
  key: ''
})

const expireForm = reactive({
  key: '',
  seconds: 60,
  unit: 'seconds'
})

const getResult = reactive({
  show: false,
  type: '',
  key: '',
  value: null,
  ttl: -1,
  exists: false,
  status: ''
})

const viewMode = ref('text')

const setRules = {
  key: [{ required: true, message: '请输入键名', trigger: 'blur' }],
  value: [{ required: true, message: '请输入值', trigger: 'blur' }]
}

const getRules = {
  key: [{ required: true, message: '请输入键名', trigger: 'blur' }]
}

const deleteRules = {
  key: [{ required: true, message: '请输入键名', trigger: 'blur' }]
}

const expireRules = {
  key: [{ required: true, message: '请输入键名', trigger: 'blur' }],
  seconds: [{ required: true, message: '请输入过期时间', trigger: 'blur' }]
}

const calculateExpireSeconds = (value: number, unit: string) => {
  const multipliers = {
    seconds: 1,
    minutes: 60,
    hours: 3600,
    days: 86400
  }
  return value * multipliers[unit as keyof typeof multipliers]
}

const formatExpireTime = (value: number, unit: string) => {
  if (value === 0) return '永不过期'
  const seconds = calculateExpireSeconds(value, unit)
  if (seconds < 60) return `${seconds}秒`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}小时`
  return `${Math.floor(seconds / 86400)}天`
}

const handleSet = async () => {
  if (!setFormRef.value) return

  try {
    await setFormRef.value.validate()
    setLoading.value = true

    const expireSeconds = setForm.expire > 0 ? calculateExpireSeconds(setForm.expire, setForm.expireUnit) : undefined
    const response = await setString(setForm.key, setForm.value, expireSeconds)

    if (response.data.success) {
      ElMessage.success('设置成功')
      resetSetForm()
    } else {
      ElMessage.error(response.data.error || '设置失败')
    }
  } catch (error: any) {
    if (error !== 'validation failed') {
      ElMessage.error('设置失败: ' + (error.response?.data?.error || error.message))
    }
  } finally {
    setLoading.value = false
  }
}

const handleGet = async () => {
  if (!getFormRef.value) return

  try {
    await getFormRef.value.validate()
    getLoading.value = true

    const response = await getString(getForm.key)

    if (response.data.success) {
      getResult.show = true
      getResult.type = 'get'
      getResult.key = getForm.key
      getResult.value = response.data.value
      getResult.ttl = response.data.ttl
      getResult.exists = response.data.exists

      if (getResult.value === null) {
        ElMessage.warning('未找到该键')
      } else {
        ElMessage.success('获取成功')
      }
    } else {
      ElMessage.error(response.data.error || '获取失败')
    }
  } catch (error: any) {
    if (error !== 'validation failed') {
      ElMessage.error('获取失败: ' + (error.response?.data?.error || error.message))
    }
  } finally {
    getLoading.value = false
  }
}

const handleCheckExists = async () => {
  if (!getFormRef.value) return

  try {
    await getFormRef.value.validate()
    existsLoading.value = true

    console.log('检查键存在:', getForm.key)
    const response = await exists(getForm.key)
    console.log('exists响应:', response.data)

    if (response.data.success) {
      getResult.show = true
      getResult.type = 'exists'
      getResult.key = getForm.key
      getResult.exists = response.data.exists

      ElMessage.success('检查完成')
    } else {
      ElMessage.error(response.data.error || '检查失败')
    }
  } catch (error: any) {
    console.error('exists错误:', error)
    if (error !== 'validation failed') {
      ElMessage.error('检查失败: ' + (error.response?.data?.error || error.message))
    }
  } finally {
    existsLoading.value = false
  }
}

const handleGetTTL = async () => {
  if (!getFormRef.value) return

  try {
    await getFormRef.value.validate()
    ttlLoading.value = true

    console.log('获取TTL:', getForm.key)
    const response = await ttl(getForm.key)
    console.log('ttl响应:', response.data)

    if (response.data.success) {
      getResult.show = true
      getResult.type = 'ttl'
      getResult.key = getForm.key
      getResult.ttl = response.data.ttl
      getResult.status = response.data.status

      ElMessage.success('获取TTL成功')
    } else {
      ElMessage.error(response.data.error || '获取TTL失败')
    }
  } catch (error: any) {
    console.error('ttl错误:', error)
    if (error !== 'validation failed') {
      ElMessage.error('获取TTL失败: ' + (error.response?.data?.error || error.message))
    }
  } finally {
    ttlLoading.value = false
  }
}

const handleDelete = async () => {
  if (!deleteFormRef.value) return

  try {
    await deleteFormRef.value.validate()

    await ElMessageBox.confirm(
      `确定要删除键 "${deleteForm.key}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    deleteLoading.value = true
    const response = await del(deleteForm.key)

    if (response.data.success) {
      ElMessage.success(response.data.deleted ? '删除成功' : '键不存在')
      resetDeleteForm()

      if (getForm.key === deleteForm.key) {
        clearResult()
      }
    } else {
      ElMessage.error(response.data.error || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel' && error !== 'validation failed') {
      ElMessage.error('删除失败: ' + (error.response?.data?.error || error.message))
    }
  } finally {
    deleteLoading.value = false
  }
}

const handleSetExpire = async () => {
  if (!expireFormRef.value) return

  try {
    await expireFormRef.value.validate()
    expireLoading.value = true

    const seconds = calculateExpireSeconds(expireForm.seconds, expireForm.unit)
    const response = await expire(expireForm.key, seconds)

    if (response.data.success) {
      ElMessage.success(response.data.message || '设置过期时间成功')
      resetExpireForm()
    } else {
      ElMessage.error(response.data.message || '设置过期时间失败')
    }
  } catch (error: any) {
    if (error !== 'validation failed') {
      ElMessage.error('设置过期时间失败: ' + (error.response?.data?.error || error.message))
    }
  } finally {
    expireLoading.value = false
  }
}

const resetSetForm = () => {
  setForm.key = ''
  setForm.value = ''
  setForm.expire = 0
  setForm.expireUnit = 'seconds'
  setFormRef.value?.clearValidate()
}

const resetGetForm = () => {
  getForm.key = ''
  getFormRef.value?.clearValidate()
}

const resetDeleteForm = () => {
  deleteForm.key = ''
  deleteFormRef.value?.clearValidate()
}

const resetExpireForm = () => {
  expireForm.key = ''
  expireForm.seconds = 60
  expireForm.unit = 'seconds'
  expireFormRef.value?.clearValidate()
}

const clearResult = () => {
  getResult.show = false
  getResult.type = ''
  getResult.key = ''
  getResult.value = null
  getResult.ttl = -1
  getResult.exists = false
  getResult.status = ''
}

const copyResult = () => {
  let textToCopy = ''

  if (getResult.type === 'get' && getResult.value !== null) {
    textToCopy = getResult.value
  } else if (getResult.type === 'exists') {
    textToCopy = getResult.exists ? 'true' : 'false'
  } else if (getResult.type === 'ttl') {
    textToCopy = getResult.ttl.toString()
  }

  if (textToCopy) {
    navigator.clipboard.writeText(textToCopy)
    ElMessage.success('已复制到剪贴板')
  }
}

const getTTLTagType = (ttlValue: number) => {
  if (ttlValue === -1) return 'info'  // 永不过期
  if (ttlValue === -2) return 'error'  // 键不存在
  if (ttlValue < 60) return 'error'  // 小于1分钟
  if (ttlValue < 3600) return 'warning'  // 小于1小时
  return 'success'  // 大于1小时
}

const formatTTL = (ttlValue: number) => {
  if (ttlValue === -1) return '永不过期'
  if (ttlValue === -2) return '键不存在'
  if (ttlValue < 60) return `${ttlValue}秒`
  if (ttlValue < 3600) return `${Math.floor(ttlValue / 60)}分钟`
  if (ttlValue < 86400) return `${Math.floor(ttlValue / 3600)}小时`
  return `${Math.floor(ttlValue / 86400)}天`
}

const getResultStatusText = computed(() => {
  if (getResult.type === 'get' && getResult.value !== null) {
    return '获取成功'
  } else if (getResult.type === 'exists') {
    return getResult.exists ? '键存在' : '键不存在'
  } else if (getResult.type === 'ttl') {
    return 'TTL查询成功'
  }
  return '未查询结果'
})

const getTTLCardClass = (ttlValue: number) => {
  if (ttlValue === -1) return 'info-card'
  if (ttlValue === -2) return 'error-card'
  if (ttlValue < 60) return 'error-card'
  if (ttlValue < 3600) return 'warning-card'
  return 'success-card'
}

const getValueSize = (value: any) => {
  if (typeof value === 'string') {
    return `${value.length} 字节`
  } else if (Array.isArray(value)) {
    return `${value.length} 元素`
  } else if (typeof value === 'object' && value !== null) {
    return `${JSON.stringify(value).length} 字节`
  }
  return '未知大小'
}

const getValueEncoding = (value: any) => {
  if (typeof value === 'string') {
    return 'UTF-8'
  } else if (Array.isArray(value)) {
    return 'Array'
  } else if (typeof value === 'object' && value !== null) {
    return 'JSON'
  }
  return '未知编码'
}

const isValidJSON = (value: any) => {
  try {
    JSON.parse(value)
    return true
  } catch (e) {
    return false
  }
}

const formatJSON = (value: any) => {
  return JSON.stringify(value, null, 2)
}

const formatHex = (value: any) => {
  if (typeof value === 'string') {
    return value.split('').map(c => c.charCodeAt(0).toString(16)).join(' ')
  } else if (Array.isArray(value)) {
    return value.map(v => v.charCodeAt(0).toString(16)).join(' ')
  } else if (typeof value === 'object' && value !== null) {
    return Object.entries(value).map(([k, v]) => `${k}: ${v.charCodeAt(0).toString(16)}`).join('\n')
  }
  return '无法格式化'
}

const downloadValue = () => {
  if (getResult.value && getResult.type === 'get') {
    const content = typeof getResult.value === 'string'
      ? getResult.value
      : JSON.stringify(getResult.value, null, 2)

    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
    const link = document.createElement('a')
    const url = URL.createObjectURL(blob)
    link.setAttribute('href', url)
    link.setAttribute('download', `redis-key-${getResult.key}-${Date.now()}.txt`)
    link.style.visibility = 'hidden'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)

    ElMessage.success('文件下载成功')
  }
}
</script>

<style scoped>
.string-operations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.operation-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.operation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #303133;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.expire-input {
  display: flex;
  align-items: center;
}

.expire-tag {
  margin-left: 10px;
}

.result-box {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.result-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.exists-result {
  margin-top: 10px;
}

.ttl-result {
  margin-top: 10px;
}

.value-display {
  margin-top: 10px;
}

.value-info {
  margin-bottom: 15px;
}

.value-content {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.value-content pre {
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 15px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #2c3e50;
  background-color: transparent;
}

@media (max-width: 1200px) {
  .string-operations {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .string-operations {
    grid-template-columns: 1fr;
  }

  .result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .result-actions {
    align-self: flex-end;
  }

  .button-group {
    flex-direction: column;
    gap: 10px;
  }

  .button-group .el-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .table-controls {
    flex-direction: column;
    gap: 10px;
  }

  .search-input {
    width: 100%;
  }
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-input__wrapper) {
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-textarea__inner) {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.el-button {
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-1px);
}

.result-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.result-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.empty-result {
  margin-top: 10px;
}

.exists-result {
  margin-top: 10px;
}

.ttl-result {
  margin-top: 10px;
}

.value-result {
  margin-top: 10px;
}

.key-info-card {
  margin-bottom: 15px;
}

.key-name {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.value-display-card {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.value-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.value-tools {
  display: flex;
  gap: 8px;
}

.value-content-wrapper {
  padding: 10px;
}

.text-view {
  margin-bottom: 10px;
}

.json-view {
  margin-bottom: 10px;
}

.hex-view {
  margin-bottom: 10px;
}

.result-card {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.success-card {
  border-left: 4px solid #67C23A;
}

.warning-card {
  border-left: 4px solid #E6A23C;
}

.result-icon {
  margin-right: 10px;
}

.result-content {
  flex: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
</style>